<template>
	<view class="box" @click="toQRCode(item.orderId)">
		<view class="food">
			<image :src="$myRequire(item.food.iconPath)" class="foodImage"></image>
			<view style="margin-left: 15rpx;">
				<view class="overHidden">
					{{ item.food.name }}
					<image :src="$myRequire('/other/more.png')" class="more"></image>
				</view>
				<view :class="item.food.open ? 'status_1' : 'status_2'"
					  class="status">
					{{ status_flag(item.food.open) }}
				</view>
			</view>
		</view>
		
		<view class="shop-item-box">
			<order-shop-item v-for="i in item.shop"
				:key="i.id"
				:item="i"
				class="shop-item">
			</order-shop-item>
		</view>

		<view class="floor">
			<view style="color: #FF3703;font-size: 17px;">{{ '￥' + item.sumPrice }}</view>
			<view>共 {{ item.shop.length }} 件</view>
			<view>{{ item.createTime }}</view>
		</view>
	</view>

</template>

<script>
	import orderShopItem from '../order-shop-item/order-shop-item.vue'
	
	export default {
		components: { orderShopItem },
		props: ['userId', 'item'],
		methods:{
			status_flag(open) {
				return open ? "营业中" : "暂停营业";
			},
			status_style(open) {
				return open ? 'status_1' : 'status_2';
			},
			toQRCode(orderId) {
				uni.navigateTo({
					url: '/pages/qrcode/qrcode?orderId=' + orderId
				})
			}
		}
	}
</script>

<style scoped>
	.box{
		width: 98%;
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		border-radius: 7px;
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
					rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
	}
	
	
	.food{
		font-size: 17px;
		width: 100%;
		display: flex;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #d3d3d3;
	}
		
	.foodImage{
		height: 80rpx;
		width: 80rpx;
	}
	
	.overHidden{
		overflow: hidden;
		text-overflow: ellipsis;
		overflow-wrap: normal;
		width: 500rpx;
	}
	
	.status{
		font-size: 13px;
	}
	
	/* 状态为：暂停营业的样式 */
	.status_1{
		color: #00b386;
	}
	
	/* 状态为：营业中的样式 */
	.status_2{
		color: #696969;
	}
	
	.more{
		width: 25rpx;
		height: 25rpx;
		margin-left: 10rpx;
	}
	
	.shop-item-box{
		width: 100%;
		padding-top: 20rpx;
		display: flex;
		overflow-x: scroll;
	}
	
	.floor{
		font-size: 12px;
		width: 100%;
		text-align: right;
	}
		
	.floor view{
		color: #9a9a9a;
		margin-top: 10rpx;
	}
</style>
